/**
 * Failed to minify the file using clean-css v5.3.3. Serving the original version.
 * Original file: /npm/@anydigital/blades@0.27.0-beta.17/assets/blades.css
 *
 * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
 */
/*** Follows https://github.com/picocss/pico/blob/main/scss/_index.scss ***/

/* Layout */

/* Extends https://github.com/picocss/pico/blob/main/scss/layout/
<!--section:docs-intro-->

Global styles:
```css */

html {
  /* Prevent horizontal overflow and scrolling, modern way. */
  overflow-x: clip;
}

body {
  /* Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support). */
  min-height: 100dvh;
}

/*```
<!--section:docs-->

### Auto-columns
```css */

.columns,
[data-is-toc] > ul,
[data-is-toc] > ol {
  columns: 30ch auto; /* 2 cols max for 65ch container */

  /* Avoid breaking inside elements, such as nested lists */
  > * {
    break-inside: avoid;
  }
}

/*```

Table of contents (`[data-is-toc]`) has auto-columns by default.

### Jump to top
```css */

[data-jump-to="top"] {
  position: fixed;
  bottom: 0;
  right: 0;
  padding-top: 50vh;
  opacity: 25%;

  &:hover {
    opacity: 75%;
  }
}

/*```
<!--section--> */

/* <!--section:code-->```css */

.breakout,
.breakout-all {
  /* Prepare the container for breakout elements */
  padding-inline: 10%;
  max-width: calc(10% + 65ch + 10%);

  /* Breakout direct children only */
  & > * {
    &:is(
      table,
      pre,
      figure, video, iframe, canvas,
      img, picture,
      /* Custom utility classes for other tags that need to be broken out */
      .breakout-item,
      .breakout-item-max
    ) {
      width: fit-content;
      min-width: 100%;
      max-width: 125%;
      margin-left: 50%;
      transform: translateX(-50%);
    }

    /* Respect img/picture min-width */
    &:is(img, picture) {
      min-width: auto;
    }

    /* Max out the width of the element */
    &.breakout-item-max {
      width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
    }
  }
}

.breakout-all > * {
  &:is(h2, h3, h4, h5, h6, hr):not([class]) {
    position: relative;

    &::before {
      content: "";
      display: block;
      position: absolute;
      background: gray;
      opacity: 12.5%;
    }
  }

  &:is(h2, h3, h4, h5, h6):not([class]) {
    &::before {
      width: 10em;
      right: 100%;
      margin-right: 0.8ch;
      height: 0.25em;
      top: 50%;
      transform: translateY(-50%);
      background: linear-gradient(to left, gray, transparent);
    }

    /* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
    &:where(hr + *) {
      &::before {
        display: none !important;
      }
    }
  }
  &:is(hr) {
    height: 0.5rem;
    border: none;
    overflow: visible;

    &::before {
      width: 100vw;
      left: 50%;
      height: 100%;
      transform: translateX(-50%);
    }
  }
}

/*```
<!--section:docs,summary-->

Framework-agnostic utilities for breaking out images and figures beyond their container width.

Use the `.breakout` class to allow elements to extend beyond their parent container.

<!--section:docs-->

```html
<div class="breakout">
  <img src="image.jpg" alt="Description" />
</div>
```

The breakout container has `10%` inline padding and a max-width of `calc(10% + 65ch + 10%)`. The breakout utilities support images, pictures, figures, canvas, audio, video, tables, pre, iframe, and other media elements. Tables inside `.breakout` are specifically enhanced for horizontal scrolling and full-bleed mobile display. This is automatically included when you import the stylesheet.

<!--section--> */

/* Content */

/* Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss
<!--section:docs-intro-->

Global styles:
```css */

html {
  /* Enable font smoothing */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  /* Enable global hyphenation */
  hyphens: auto;
  /* ... except for links and tables which are better (safer) without hyphenation */
  a,
  table {
    hyphens: none;
  }
}

/*```
<!--section:docs-->

### Heading anchors

Set `data-is-anchor` attribute on anchors inside headings to position them absolutely, and show only on hover (when supported):

<article><h2>Heading with anchor <a href="#hwa" data-is-anchor>#</a></h2></article>

How it works:
```css */

h1,
h2,
h3,
h4,
h5,
h6 {
  position: relative;

  [data-is-anchor] {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    padding-right: 0.2ch;
    color: silver;
    text-decoration: none;
    visibility: hidden;
  }
  /* Avoid double-tap on touch devices */
  @media (hover: hover) {
    &:hover {
      [data-is-anchor] {
        visibility: visible;
      }
    }
  }
}

/*```
> **PRO-TIP** for 11ty + markdown-it-anchor: https://github.com/anydigital/eleventy-blades/blob/main/src/eleventy.config.js

### List markers

Use inline `style="--list-marker:'🥷 '"` on `<ul>/<ol>` or even individual `<li>` to customize list markers:
<article>

- Customize
- list
- markers
- with [Blades CSS](https://blades.ninja/css/) {style="--list-marker:'🥷 '"}

{style="--list-marker:'🧊 '"}
</article>

How it works:
```css */

ul,
ol {
  &[style*="--list-marker:"] {
    list-style-type: var(--list-marker);

    > li {
      list-style-type: inherit;
    }
  }

  li[style*="--list-marker:"] {
    list-style-type: var(--list-marker);
  }
  li[data-marker]::marker {
    /* ⚠️ `data-marker` works only in Chrome and Firefox */
    content: attr(data-marker) " ";
  }
}

/*```

### Unlist

Helper class to remove list styling at all:
```css */

.unlist {
  padding-inline-start: 0;

  > li {
    list-style: none;
  }
}

/*```
<!--section--> */

/* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
<!--section:code-->
```css */

a {
  /* Use inline flex only if link contains an icon */
  &:has(> i) {
    display: inline-flex;
    gap: 0.375ch; /* =3/8 */
    text-wrap: balance;
    overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
  }
  > i {
    font-style: normal;
    float: left; /*                 ✅ Chrome ❌ Safari */
    text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */

    /* Favicons */
    > img {
      height: 1.25em;
      margin-block: calc(-0.25em / 2);
      display: inline-block; /* for Tailwind CSS Typography */
    }

    /* Font Awesome */
    &[class^="fa-"],
    &[class*=" fa-"] {
      line-height: inherit;
      --fa-width: auto;
    }
    &.fa-lg {
      line-height: normal;
    }
  }
}

/*```
> **PRO-TIP** for 11ty: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons

<!--section:docs,summary-->

Use Blades' `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links. It automatically handles sizing and alignment while preventing underline on icons.

<!--section:docs-->

Compare:

| Without Blades <hr class="lg">                                                                          | With Blades' `<i>`-helper <hr class="lg">                                                                      | Clean HTML without `<span>ning` <hr class="x2"> |
| ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
| [🥷 Link with emoji](#)                                                                                 | [<i>🥷</i> Link with emoji](#)                                                                                 | `<a><i>🥷</i> Text</a>`                         |
| [![](https://www.google.com/s2/favicons?domain=any.digital&sz=64) Multi-line link <br> with favicon](#) | [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Multi-line link <br> with favicon](#) | `<a><i><img src="..."></i> Text</a>`            |
| [<b class="fa-brands fa-github fa-lg"></b> Link with Font Awesome icon](#)                              | [<i class="fa-brands fa-github fa-lg"></i> Link with Font Awesome icon](#)                                     | `<a><i class="fa-..."></i> Text</a>`            |

---

[How we made it ↗ &nbsp;<small>(on Codepen)</small>](https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237){role=button .outline}

<!--section--> */

/* Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
<!--section:docs-->

### Horizontal expanders

Simply insert `<hr>` inside `<th>` to forcibly widen too narrow columns (especially useful in markdown):
```html
<th>Col <hr></th>
```
Example table before:
<article class="overflow-auto"><table>
  <tr><th>Wide tables</th><th>with many</th><th>columns might</th><th>get collapsed</th><th>and be really</th><th>hard to read!</th></tr>
</table></article>

Same table after adding `<hr>`-expanders:
<article class="overflow-auto"><table>
  <tr><th>Wide tables <hr></th><th>with many <hr></th><th>columns might <hr></th><th>get collapsed <hr></th><th>and be really <hr></th><th>hard to read! <hr></th></tr>
</table></article>

Living examples of big tables with `<hr>`-expanders:
- https://any.digital/insights/ai-ide/
- https://any.digital/insights/css-frameworks/
- https://any.digital/insights/ssg/
- https://blades.ninja/build-awesome-11ty/#min-starters

How it works:
```css */

table {
  th {
    hr {
      width: 12ch; /* min ~65/12 = ~5 cols */
      height: 0;
      margin: 0;
      visibility: hidden;

      &.lg {
        width: 18ch;
      }
      &.x2 {
        width: 24ch;
      }
    }
  }
}

/*```
### Borderless table

`<table class="borderless">` removes all default borders:

<article>

| Less | borders |
| ---- | ------- |
| more | fun     |

{.borderless}
</article>

Living example: https://bladeswitch.com/#minimal-dependencies table

<!--section--> */

table.borderless {
  th,
  td {
    border: none;
  }
}

/* <!--section:code-->
```css */

table.responsive,
.breakout > table:not(.does-not-exist),
.breakout-all > table:not(.does-not-exist) {
  /* Center horizontally */
  margin-left: 50%;
  transform: translateX(-50%);

  /* Let them full-bleed */
  width: max-content;
  min-width: auto;
  max-width: 100vw;
  padding-inline: 7.5%;

  /* Let them scroll */
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */

  th,
  td {
    padding-inline-start: 0;
  }
}

/*```
<!--#TODO:css-blade-->
Soft-increase selector specificity trick:

`table:not(.does-not-exist)` (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`

<!--section:docs,summary-->

`<table class="responsive">` allows a table to full-bleed and scroll on mobile.

<!--section:docs-->

| Term              | Description <hr class="x2">                                                                                                                                                                  | Link                                                |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
| Responsive design | Approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction. | https://en.wikipedia.org/wiki/Responsive_web_design |

{.responsive}

---

Tables inside https://blades.ninja/css/breakout/ are responsive by default.

Living examples:

- https://any.digital/insights/ai-ide/
- https://any.digital/insights/css-frameworks/
- https://any.digital/insights/ssg/
- https://blades.ninja/build-awesome-11ty/#min-starters

<!--section--> */

/* <!--section:docs-->
### Code
Extends https://github.com/picocss/pico/blob/main/scss/content/_code.scss
```css */

pre {
  padding: 1rem 1.5rem;
  padding-inline-end: 2rem;

  @media screen and (max-width: 767px) {
    border-radius: 0;
  }
}

code {
  /* Code block caption via data-attr (to display filename, etc.) */
  &[data-caption] {
    &::before {
      content: attr(data-caption);
      display: block;
      margin-bottom: 1rem;
      opacity: 50%;
      font-style: italic;
    }
  }

  &:where(pre > *) {
    padding: 0;
  }
}

/*** Extends https://github.com/PrismJS/prism/blob/master/plugins/treeview/prism-treeview.css ***/

.token.treeview-part {
  .entry-line {
    width: 2.5em !important;
    opacity: 25%;
  }
  .entry-name:last-child {
    opacity: 50%;

    &::before {
      display: none !important;
    }
  }
}

/*``` <!--section--> */

/* Forms */

/* Moved here from https://github.com/anydigital/float-label-css for easier maintenance
<!--section:code-->
```css */

label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
.has-float-label {
  display: block;
  position: relative;

  /* Default/fallback state when float label is minimized */
  > span,
  label {
    position: absolute;
    left: 0;
    top: 0;
    cursor: text;
    font-size: 75%;
  }

  /* Modern browser ? enlarge float label instead of placeholder : otherwise, code below is ignored in favor of default state above */
  *:placeholder-shown:not(:focus)::placeholder {
    opacity: 0;
  }
  &:has(*:placeholder-shown:not(:focus)) {
    > span,
    label {
      font-size: inherit;
      opacity: 50%;
    }
  }
}

/*```
<!--section--> */

/* Utilities */

/*
<!--section:docs-->

### Auto-dark
```css */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    .dark-auto {
      filter: invert(100%) hue-rotate(180deg);
    }
  }
}

/*```

### Faded
```css */

.faded {
  opacity: 50%;
  &:hover {
    opacity: 87.5%;
  }
}

/*```

### Invert
```css */

/* Extends https://tailwindcss.com/docs/filter-invert */

.invert {
  /* Fix the scrollbar color when inverted */
  ::-webkit-scrollbar {
    filter: invert(1) !important;
  }
}

/*``` <!--section--> */

/* <!--section:code-->
```css */

label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
.has-float-label {
  /* Default/fallback state */
  > span,
  label {
    padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
    padding-block-start: 0.25rem;
    opacity: 75%;
    transition: all 0.25s;
  }
  input,
  textarea,
  select {
    margin-block-start: 0; /* reset Pico */
    padding-inline-start: 1rem; /* match Pico */
    padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */

    &::placeholder {
      opacity: 100%;
      transition: all 0.25s;
    }
  }

  /* Enlarged state */
  &:has(*:placeholder-shown:not(:focus)) {
    > span,
    label {
      padding-block: 0.75rem; /* match Pico */
    }
  }
}

body {
  /* Make the `body` a flex container with column layout, and `main` to automatically fill available space. This is useful for creating sticky footers and full-height layouts. */
  display: flex;
  flex-direction: column;
  > main {
    flex-grow: 1;
  }
}

a {
  &:not([href^="#"]) {
    text-decoration-thickness: 1px;
    &:hover {
      text-decoration-thickness: 2px;
    }
  }
}

h1 {
  font-size: 2.5em; /* for pico.css & tw-typography */
  margin-bottom: 1rem; /* for tw-typography */
}

/* Potential fix https://github.com/picocss/pico/blob/main/css/pico.css for the very first headings
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
  margin-top: var(--pico-typography-spacing-top);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  & ~ & {
    margin-bottom: 2rem;
  }
}
NOTE: be careful with wrapped headings, i.e. inside nav: https://blades.ninja/build-awesome-11ty/#usage
*/

hr {
  margin-block: 2em; /* for pico.css & tw-typography */
}

ul {
  ul {
    font-size: 87.5%;
  }
}

pre {
  small {
    opacity: 75%;
    font-weight: lighter;
  }
}

table {
  th {
    vertical-align: bottom;
    font-weight: bold;
  }
  td {
    vertical-align: top;
  }
  pre {
    margin-bottom: 0.25rem;
  }
}

[data-jump-to="top"] {
  > i {
    display: inline-block;
    padding: 0.25rem 0.375rem;
    margin: 0.5rem;
    font-size: 0.75rem;
    color: black;
    border-color: black;
  }
}

[data-is-toc] {
  font-size: 87.5%;

  a {
    text-decoration: none;
  }
  > ul > * > a {
    font-weight: 500;
  }
}

.breakout,
.breakout-all {
  > img,
  > figure {
    margin-bottom: 1rem;
  }
}

.faded {
  a {
    text-decoration-style: dotted;
  }
}

/*```
<!--section--> */